<template>
  <van-action-sheet @close="close" v-model="myShow" title="频道管理">
    <div class="panel">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="isEdit = !isEdit" type="danger" plain size="mini">{{
          isEdit ? "取消" : "编辑"
        }}</van-button>
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownList" :key="item.id">
          <span
            @click="clickItem(index)"
            :class="{ active: index === value }"
            >{{ item.name }}</span
          >
          <!-- 图标 -->
          <van-icon
            v-show="isEdit && index != 0"
            @click="remove(index)"
            class="icon-del"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
    </div>

    <div class="panel">
      <div class="title">
        <span>可选频道</span>
      </div>
      <van-grid>
        <!-- 点谁就把谁加到我的频道里 -->
        <van-grid-item
          v-for="item in optionalList"
          :key="item.id"
          :text="item.name"
          @click="add(item)"
        />
      </van-grid>
    </div>
  </van-action-sheet>
</template>

<script>
import { saveChannelAPI } from "@/api/channel";
export default {
  props: {
    // 父组件传进来的显示和隐藏
    show: {
      type: Boolean,
      default: false,
    },
    // 父组件传进来的我的频道数组
    ownList: {
      type: Array,
      required: true,
    },
    // 父组件传进来的所有频道数组
    allList: {
      type: Array,
      required: true,
    },
    // 父组件传进来的当前选中的频道下标
    value: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      myShow: false,
      isEdit: false,
    };
  },
  watch: {
    // 监听父组件传递过来的值有没有发生改变
    show(newVal) {
      // 一改变就把父组件传递过来的值赋值给myShow
      this.myShow = newVal;
    },
  },
  computed: {
    //   // 可选频道
    //   optionalList () {

    //       // 过滤出所有频道里，除了我的频道以外的频道
    //       // 换句话说就是把 不在我的频道 里的频道过滤出来
    //       const list = this.allList.filter(v => {

    //           // 我要判断当前遍历的频道是否在我的频道里面，如果在不要过滤出来，不在反而要过滤出来
    //           const idx = this.ownList.findIndex(val => {
    //               if (v.id === val.id) {
    //                   return true
    //               }
    //           })

    //           // 我要找没有对应的，换句话说要过滤出结果为-1的
    //           return idx == -1
    //       })

    //       return list
    //   },

    // 一行搞定
    optionalList() {
      return this.allList.filter(
        (v) => this.ownList.findIndex((val) => v.id === val.id) == -1
      );
    },
  },
  methods: {
    close() {
      // 也要让父组件的值修改成false
      // 换句话说如果希望父组件能用sync修饰符
      // 那么子传父时事件名就要写 update:props的名字
      this.$emit("update:show", false);
    },

    async add(item) {
      // 添加
      this.ownList.push(item);

      if (this.$store.state.tokenObj.token) {
        // 调用接口
        const channels = this.ownList.map((v, index) => {
          return {
            id: v.id,
            seq: index,
          };
        });
        await saveChannelAPI({
          channels,
        });
      } else {
        // 保存到本地存储
        window.localStorage.setItem("channel86", JSON.stringify(this.ownList));
      }
    },

    async remove(index) {
      // 根据下标删除
      this.ownList.splice(index, 1);

      // 判断要删的下标是不是在当前选中的下标的前面
      // 如何判断在不在前面？删除的下标小于当前下标就代表在前面
      if (index < this.value) {
        this.$emit("input", this.value - 1);
      }
      // 登录了
      if (this.$store.state.tokenObj.token) {
        // 调用接口
        const channels = this.ownList.map((v, index) => {
          return {
            id: v.id,
            seq: index,
          };
        });
        await saveChannelAPI({
          channels,
        });
      } else {
        // 保存到本地存储
        window.localStorage.setItem("channel86", JSON.stringify(this.ownList));
      }
    },

    // 点击我的频道触发的事件
    clickItem(index) {
      // 隐藏自己
      this.$emit("update:show", false);

      // 把下标也要传递给父组件
      this.$emit("input", index);
    },
  },
};
</script>

<style lang="less" scoped>
.panel {
  padding: 0 20px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
  }
}

.icon-del {
  position: absolute;
  right: 5px;
  top: 5px;
}

.active {
  color: red;
}
</style>